<template>
  <div>
    <base-table
      ref="table"
      :page-config="{
        pageSize: 5,
        pageNo: 1,
      }"
      :page-sizes="[5, 10, 15, 20, 50]"
      :search-params="searchParams"
      :columns="columnsAction"
      :async-fc="pageApi"
    >
      <template #tableHeader>
        <t-button @click="insert">{{ t('components.commonTable.insert') }}</t-button>
      </template>
    </base-table>
    <t-dialog v-model:visible="modalOpen" width="45%" @confirm="onModalSubmit">
      <t-form ref="submitFormRef" style="width: 100%" :rules="rules" :data="submitForm" label-align="top">
        <t-row style="width: 100%" :gutter="[16, 16]">
          <t-col :span="12">
            <t-form-item :label="'标签名称'" name="tagName">
              <t-input v-model="submitForm.tagName" :placeholder="'请输入标签名称'" />
            </t-form-item>
          </t-col>
          <t-col :span="12">
            <t-form-item :label="'备注'" name="remark">
              <t-textarea v-model="submitForm.remark" :placeholder="'请输入备注'" />
            </t-form-item>
          </t-col>
        </t-row>
      </t-form>
    </t-dialog>
  </div>
</template>
<script setup lang="ts">
import { DialogPlugin, FormInstanceFunctions, Link, MessagePlugin, Space } from 'tdesign-vue-next';
import { computed, ref } from 'vue';

import { deleteApi, insertApi, pageApi, updateApi } from '@/api/article_tags';
import baseTable from '@/components/base-table/index.vue';
import { t } from '@/locales';

import { getColumns, getRules, getSearchParams } from './constants';

// 提交表单
const submitForm = ref<any>({});
// 弹窗
const modalOpen = ref(false);
// 表单提交
const submitFormRef = ref<FormInstanceFunctions>(null);
const table = ref<_TableInstanceFunctions>(null);

const searchParams = computed(() => getSearchParams());
const rules = computed(() => getRules());
const columns = computed(() => getColumns());

const columnsAction = computed(() =>
  columns.value.concat([
    {
      title: '备注',
      ellipsis: true,
      align: 'center',
      colKey: 'remark',
    },
    {
      align: 'left',
      fixed: 'right',
      width: 160,
      colKey: 'op',
      title: t('components.commonTable.operation'),
      cell: (h, { row }) =>
        h(
          Space,
          {
            split: 'line',
          },
          () => [
            h(
              Link,
              {
                theme: 'primary',
                underline: false,
                onClick: () => {
                  submitForm.value = row;
                  modalOpen.value = true;
                },
              },
              () => t('components.commonTable.edit'),
            ),
            h(
              Link,
              {
                theme: 'danger',
                underline: false,
                onClick: () => {
                  const confirmDialog = DialogPlugin.confirm({
                    header: t('components.commonTable.tips'),
                    body: t('components.commonTable.deleteConfirm'),
                    confirmBtn: {
                      content: t('components.commonTable.submit'),
                      theme: 'primary',
                      loading: false,
                    },
                    cancelBtn: {
                      content: t('components.commonTable.cancel'),
                      theme: 'default',
                      loading: false,
                    },
                    theme: 'warning',
                    onConfirm: async () => {
                      confirmDialog.update({
                        confirmBtn: { content: t('components.commonTable.submitting'), loading: true },
                      });
                      await deleteApi(row.id);
                      MessagePlugin.success(t('components.commonTable.deleteSuccess'));
                      table.value.onSearch();
                      confirmDialog.update({
                        confirmBtn: { content: t('components.commonTable.submit'), loading: false },
                      });
                      confirmDialog.hide();
                    },
                  });
                },
              },
              () => t('components.commonTable.delete'),
            ),
          ],
        ),
    },
  ]),
);

const insert = () => {
  modalOpen.value = true;
  submitForm.value = {};
};
/**
 * 提交表单
 */
const onModalSubmit = async () => {
  const valid = await submitFormRef.value.validate();
  if (valid === true) {
    if (submitForm.value.id) {
      await updateApi(submitForm.value);
    } else {
      await insertApi(submitForm.value);
    }
    MessagePlugin.success('操作成功！');
    modalOpen.value = false;
    table.value.onSearch();
  }
};
</script>

<style lang="less" scoped>
:deep(.t-dialog) {
  .t-dialog__body {
    max-height: calc(90vh - 200px);
    overflow-y: auto;
  }

  .t-form {
    .t-form__item {
      padding: 0 0 24px 0;
      margin-bottom: 0;

      &:last-child {
        padding-bottom: 0;
      }
    }

    .t-radio-group {
      display: flex;
      gap: 32px;
    }
  }
}

:deep(.t-table) {
  .t-avatar {
    width: 40px;
    height: 40px;
    font-size: 16px;
    background: #e3e6eb;
  }
}
</style>
